<template> 
  <div class="carousel">
    <el-carousel :interval="5000" arrow="always">
      <el-carousel-item v-for="item in 4" :key="item">
        <div>
          <img style="height: 20rem;width: 30%;" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png"/>
          <h3 text="2xl" justify="center">{{ item }}</h3>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
  <el-divider border-style="double" />
  <div class="marketing">
    <el-row><el-text class="mx-1" size="large" type="primary" tag="b">服务</el-text></el-row>
    <el-row justify="center">
      <el-col :span="6" v-for="(item, index) in futures" :key="index">
        <Feature>
            <template #cover><ICEs></ICEs></template>
            <div>
              <h3 class="fw-normal">{{item.heading}}</h3>
              <p>{{item.content}}</p>
            </div>
            <template #footer><el-button type="primary" tag="a" :href="item.link" target="_blank" rel="noopener noreferrer">查看&raquo;</el-button></template>
        </Feature>
      </el-col>
    </el-row>
    <el-divider border-style="double" />
    <el-row><el-text class="mx-1" size="large" type="primary" tag="b">价值/优势</el-text></el-row>
    <el-row>
      <el-col :span="6" v-for="(item, index) in values" :key="index">
        <Feature>
            <template #cover><ICEs></ICEs></template>
            <h3 class="fw-normal">{{item.heading}}</h3>
            <p>{{item.content}}</p>
            <template #footer><el-button type="primary" tag="a" :href="item.link" target="_blank" rel="noopener noreferrer">View details &raquo;</el-button></template>
        </Feature>
      </el-col>
    </el-row>    
  </div>
</template>


<script lang="ts">
import {defineComponent, h} from 'vue';
import {userChoiceStore} from '@/stores/counter'
import Feature from '@/components/TsFeature.vue';
import ICEs from '@/components/icons/IconEcosystem.vue'
import ICS  from '@/components/icons/IconSupport.vue'

interface TsFuture{
  heading:string;
  icon:any;
  content:string;
  link:string;
}


export default defineComponent({
  components:{Feature, ICEs, },
  setup(){
    const futures:TsFuture[] =[{heading:'系统建设',icon:()=>h(ICEs), content:"交付电商、物联网、供应链、CRM等系统",link:"/product/build"},
    {heading:'系统运维',icon:()=>h(ICS), content:"7*24小时保姆式的运维管理,及时响应问题",link:"/product/tech"},
    {heading:'技术顾问',icon:()=>h(ICS), content:"提供高质量的系统建设方案咨询",link:"/product/ask"},
    {heading:'团队建设',icon:()=>h(ICS), content:"提供高质量的团队建设支持，包含面试、培训",link:"/product/team"}
    ];
    const values:TsFuture[] = [{heading:'专业',icon:()=>h(ICEs),content:'团队来自国内著名大厂,比如：华为、腾讯',link:"/abmout-us"},
    {heading:'品质',icon:()=>h(ICEs),content:'出自久经实战的专业团队，品质可以保障',link:"/tech/plat"},
    {heading:'可靠',icon:()=>h(ICEs),content:'7*24实时监控,及时响应问题',link:"/tech/sla"},
    {heading:'实惠',icon:()=>h(ICEs),content:'合理的价格，高质的交付',link:"/tech/price"}];
    return{
      futures,
      values
    }
  },
  beforeMount() {
      console.log('/')
      userChoiceStore().set("/")
    }
})
</script>


<style scoped lang="less">
.carousel{
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-bottom: .5rem;
}
.el-carousel{
  height: 50%;
  width: 50%;
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 30rem;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #428cf3;
  height: 30rem;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #94c1f5;
  height: 30rem;
}

.fw-normal{
  margin-top: .5rem;
  margin-bottom: .5rem;
}
.marketing{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-top: .5rem;
}
</style>